<template>
  <view>
    <view class="flex-col relative page">
  <view class="flex-row items-center section">
    <text class="text">2024-12月</text>
    <image
      class="image"
      src="@/static/images/diary/1.png"
    />
  </view>
  <view class="flex-col justify-start section_10">
    <view class="flex-col justify-start section_11">
      <view class="flex-col justify-start items-center relative section_12">
        <image
          class="image_8"
          src="@/static/images/diary/2.png"
        />
        <view class="flex-row equal-division">
          <view class="flex-col items-center group_5 equal-division-item">
            <image
              class="image_9"
              src="@/static/images/diary/3.png"
            />
            <text class="mt-4 font_4 text_24">首页</text>
          </view>
          <view class="ml-22 flex-col items-center group_5 equal-division-item">
            <image
              class="image_9"
              src="@/static/images/diary/4.png"
            />
            <text class="mt-4 font_4 text_24">我的</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="flex-col justify-start section_2 pos">
    <view class="flex-col section_3">
      <view class="flex-row group">
        <view class="flex-col justify-start items-center text-wrapper"><text class="font text_2">日</text></view>
        <view class="flex-col justify-start items-center text-wrapper_2 ml-13">
          <text class="font text_8">一</text>
        </view>
        <view class="flex-col justify-start items-center text-wrapper ml-13"><text class="font text_3">二</text></view>
        <view class="flex-col justify-start items-center text-wrapper ml-13"><text class="font text_4">三</text></view>
        <view class="flex-col justify-start items-center text-wrapper ml-13"><text class="font text_5">四</text></view>
        <view class="flex-col justify-start items-center text-wrapper ml-13"><text class="font text_6">五</text></view>
        <view class="flex-col justify-start items-center text-wrapper ml-13"><text class="font text_7">六</text></view>
      </view>
      <view class="mt-6 flex-row">
        <view class="flex-col items-center section_4">
          <image
            class="image_2"
            src="@/static/status/4.png"
          />
          <text class="font_2 text_12 mt-7">1</text>
        </view>
        <view class="ml-2 flex-col items-center section_4">
          <image
            class="image_2"
            src="@/static/status/3.png"
          />
          <text class="font_2 text_13 mt-7">2</text>
        </view>
        <view class="ml-2 flex-col items-center section_4">
          <image
            class="image_2"
            src="@/static/status/2.png"
          />
          <text class="font_2 text_14 mt-7">3</text>
        </view>
        <view class="ml-2 flex-col items-center section_4">
          <image
            class="image_2"
            src="@/static/status/1.png"
          />
          <text class="font_2 text_15 mt-7">4</text>
        </view>
        <view class="ml-2 flex-col justify-start items-center text-wrapper_3">
          <text class="font_2 text_9">5</text>
        </view>
        <view class="ml-2 flex-col justify-start items-center text-wrapper_4">
          <text class="font_2 text_10">6</text>
        </view>
        <view class="ml-2 flex-col justify-start items-center text-wrapper_4">
          <text class="font_2 text_11">7</text>
        </view>
      </view>
    </view>
  </view>
  <view class="flex-col justify-start section_5 pos_2">
    <view class="flex-col section_6">
      <view class="flex-row">
        <image
          class="image_3"
          src="@/static/images/diary/5.png"
        />
        <text class="ml-4 font_3 text_16">夜晚 19:18</text>
      </view>
      <view class="mt-8 flex-col justify-start relative">
        <view class="flex-col group_2">
          <view class="flex-col section_7">
            <view class="flex-col">
              <view class="flex-row items-center">
                <image
                  class="image_4"
                  src="@/static/avatar/冰淇淋男孩.png"
                />
                <view class="ml-4 flex-col justify-start text-wrapper_5">
                  <text class="font text_17">啊哈哈哈哈哈哈哈啊哈哈哈苏卡达</text>
                </view>
              </view>
              <view class="mt-8 flex-row justify-evenly items-center group_3">
                <view class="flex-col justify-start text-wrapper_5">
                  <text class="font text_18">啊哈哈哈哈哈哈哈啊哈哈哈苏卡达</text>
                </view>
                <image
                  class="image_5"
                  src="@/static/avatar/小女孩.png"
                />
              </view>
              <view class="mt-8 flex-row items-center">
                <image
                  class="image_4"
                  src="@/static/avatar/冰淇淋男孩.png"
                />
                <view class="ml-4 flex-col justify-start text-wrapper_5">
                  <text class="font text_19">啊哈哈哈哈哈哈哈啊哈哈哈苏卡达</text>
                </view>
              </view>
            </view>
            <view class="mt-8 flex-col">
              <view class="flex-row justify-evenly items-center group_3">
                <view class="flex-col justify-start text-wrapper_5">
                  <text class="font text_18">啊哈哈哈哈哈哈哈啊哈哈哈苏卡达</text>
                </view>
                <image
                  class="image_5"
                  src="@/static/avatar/小女孩.png"
                />
              </view>
              <view class="mt-8 flex-row items-center">
                <image
                  class="image_4"
                  src="@/static/avatar/冰淇淋男孩.png"
                />
                <view class="ml-4 flex-col justify-start text-wrapper_5">
                  <text class="font text_20">啊哈哈哈哈哈哈哈啊哈哈哈苏卡达</text>
                </view>
              </view>
            </view>
            <view class="mt-8 flex-col">
              <view class="flex-row justify-evenly items-center group_3">
                <view class="flex-col justify-start text-wrapper_5">
                  <text class="font text_18">啊哈哈哈哈哈哈哈啊哈哈哈苏卡达</text>
                </view>
                <image
                  class="image_5"
                  src="@/static/avatar/小女孩.png"
                />
              </view>
              <view class="mt-8 flex-row items-center">
                <image
                  class="image_4"
                  src="@/static/avatar/冰淇淋男孩.png"
                />
                <view class="ml-4 flex-col justify-start text-wrapper_5">
                  <text class="font text_21">啊哈哈哈哈哈哈哈啊哈哈哈苏卡达</text>
                </view>
              </view>
            </view>
          </view>
          <view class="flex-row group_4">
            <image
              class="image_7"
              src="@/static/images/diary/6.png"
            />
            <text class="ml-6 font_3 text_22">白天 14:23</text>
          </view>
          <view class="flex-col section_9">
            <view class="flex-row items-center">
              <image
                class="image_4"
                src="@/static/avatar/冰淇淋男孩.png"
              />
              <view class="ml-4 flex-col justify-start text-wrapper_5">
                <text class="font text_23">啊哈哈哈哈哈哈哈啊哈哈哈苏卡达</text>
              </view>
            </view>
            <view class="mt-8 flex-row justify-evenly items-center group_3">
              <view class="flex-col justify-start text-wrapper_6">
                <text class="font text_18">啊哈哈哈哈哈哈哈啊哈哈哈苏卡达</text>
              </view>
              <image
                class="image_5"
                src="@/static/avatar/小女孩.png"
              />
            </view>
          </view>
        </view>
        <view class="flex-col justify-start section_8 pos_3">
          <view class="flex-col justify-start items-center image-wrapper">
            <image
              class="image_6"
              src="@/static/images/diary/7.png"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>
.ml-13 {
  margin-left: 26rpx;
}
.mt-7 {
  margin-top: 14rpx;
}
.page {
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding: 120rpx 36rpx 484rpx;
  background-image: linear-gradient(180deg, #ffe944 -244.2%, #ffe94400 97.7%);
}
.text {
  color: #333333;
  font-size: 40rpx;
  font-family: DIN;
  font-weight: 700;
  line-height: 35.68rpx;
}
.image {
  width: 32rpx;
  height: 32rpx;
}
.section_10 {
  margin-top: 762rpx;
  background-image: url('@/static/images/diary/8.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_11 {
  background-image: url('@/static/images/diary/9.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_12 {
  padding: 32rpx 0 96rpx;
  background-image: url('@/static/images/diary/10.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image_8 {
  width: 94rpx;
  height: 94rpx;
}
.equal-division {
  position: absolute;
  left: 0;
  right: 0;
  top: 46.38rpx;
}
.image_9 {
  width: 48rpx;
  height: 48rpx;
}
.font_4 {
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  line-height: 22.16rpx;
  color: #666666;
}
.text_24 {
  line-height: 22.24rpx;
}
.group_5 {
  flex: 1 1 352.78rpx;
}
.equal-division-item {
  padding: 32rpx 0;
}
.section_2 {
  padding: 20rpx 0 28rpx;
  border-radius: 40rpx;
  background-image: url('@/static/images/diary/11.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pos {
  position: absolute;
  left: 23.64rpx;
  right: 26.36rpx;
  top: 166.62rpx;
}
.section_3 {
  margin: 0 8rpx;
  padding: 28rpx 32rpx;
  background-image: url('@/static/images/diary/12.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.group {
  padding: 0 12rpx;
}
.text-wrapper {
  flex: 1 1 63rpx;
  padding: 8rpx 0;
  background-color: #fff6d2;
  border-radius: 88rpx;
  height: 37rpx;
  border-left: solid 1rpx #666666;
  border-right: solid 1rpx #666666;
  border-top: solid 1rpx #666666;
  border-bottom: solid 1rpx #666666;
}
.font {
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  line-height: 22.16rpx;
  color: #333333;
}
.text_2 {
  line-height: 20.48rpx;
}
.text-wrapper_2 {
  padding: 8rpx 0 16rpx;
  flex: 1 1 63rpx;
  background-color: #fff6d2;
  border-radius: 88rpx;
  height: 37rpx;
  border-left: solid 1rpx #666666;
  border-right: solid 1rpx #666666;
  border-top: solid 1rpx #666666;
  border-bottom: solid 1rpx #666666;
}
.text_8 {
  line-height: 2.5rpx;
}
.text_3 {
  line-height: 16.68rpx;
}
.text_4 {
  line-height: 18.36rpx;
}
.text_5 {
  line-height: 19.42rpx;
}
.text_6 {
  line-height: 18.76rpx;
}
.text_7 {
  line-height: 22.04rpx;
}
.image_2 {
  width: 44rpx;
  height: 44rpx;
}
.font_2 {
  font-size: 32rpx;
  font-family: DIN;
  line-height: 22.16rpx;
  color: #cccccc;
}
.text_12 {
  line-height: 22.78rpx;
}
.section_4 {
  flex: 1 1 86rpx;
  padding: 16rpx 0;
  background-color: #ffffff;
  border-radius: 24rpx;
  height: 108rpx;
}
.text_13 {
  line-height: 22.98rpx;
}
.text_14 {
  line-height: 23.24rpx;
}
.text_15 {
  line-height: 22.78rpx;
}
.text-wrapper_3 {
  padding: 40rpx 0 44rpx;
  flex: 1 1 86rpx;
  background-color: #ffe944;
  border-radius: 24rpx;
  height: 109rpx;
  border-left: solid 1rpx #666666;
  border-right: solid 1rpx #666666;
  border-top: solid 1rpx #666666;
  border-bottom: solid 1rpx #666666;
}
.text_9 {
  color: #333333;
  font-weight: 700;
  line-height: 22.98rpx;
}
.text-wrapper_4 {
  flex: 1 1 86rpx;
  padding: 44rpx 0;
  background-color: #ffffff;
  border-radius: 24rpx;
  height: 108rpx;
}
.text_10 {
  line-height: 22.98rpx;
}
.text_11 {
  line-height: 22.78rpx;
}
.section_5 {
  padding: 4rpx 0;
  border-radius: 48rpx;
  background-image: url('@/static/images/diary/13.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pos_2 {
  position: absolute;
  left: 28rpx;
  right: 26rpx;
  top: 424rpx;
}
.section_6 {
  margin: 0 4rpx;
  padding: 32rpx 0 40rpx 32rpx;
  background-image: url('@/static/images/diary/14.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image_3 {
  width: 24rpx;
  height: 24rpx;
}
.group_2 {
  margin-right: 32rpx;
  overflow: hidden;
  height: 830rpx;
}
.section_7 {
  padding: 32rpx 16rpx;
  background-color: #f3eddf;
  border-radius: 48rpx;
}
.image_4 {
  width: 62rpx;
  height: 62rpx;
  border-radius: 50%;
}
.text-wrapper_5 {
  padding: 12rpx 0;
  border-radius: 52rpx;
  background-image: url('@/static/images/diary/15.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 48rpx;
}
.text_17 {
  margin-left: 12rpx;
  margin-right: 8rpx;
}
.group_3 {
  padding-left: 136rpx;
}
.text_18 {
  margin-left: 12rpx;
  margin-right: 8rpx;
}
.image_5 {
  box-shadow: 1.24rpx 1.24rpx 0rpx #333333;
  border-radius: 50%;
  width: 62rpx;
  height: 62rpx;
}
.text_19 {
  margin-left: 12rpx;
  margin-right: 8rpx;
}
.text_20 {
  margin-left: 12rpx;
  margin-right: 8rpx;
}
.text_21 {
  margin-left: 12rpx;
  margin-right: 8rpx;
}
.group_4 {
  padding: 40rpx 0 16rpx;
}
.image_7 {
  border-radius: 50%;
  width: 24rpx;
  height: 24rpx;
}
.font_3 {
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  line-height: 22.16rpx;
  font-weight: 700;
  color: #333333;
}
.text_16 {
  line-height: 22.84rpx;
}
.text_22 {
  line-height: 22.6rpx;
}
.section_9 {
  margin-bottom: -294rpx;
  padding: 32rpx 16rpx 278rpx;
  background-color: #f3eddf;
  border-radius: 48rpx 48rpx 0 0;
}
.text_23 {
  margin-left: 12rpx;
  margin-right: 8rpx;
}
.text-wrapper_6 {
  padding: 12rpx 0 4rpx;
  border-radius: 52rpx;
  background-image: url('@/static/images/diary/16.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 38rpx;
}
.section_8 {
  background-image: url('@/static/images/diary/17.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 106rpx;
}
.pos_3 {
  position: absolute;
  right: 0;
  top: 596rpx;
}
.image-wrapper {
  padding: 24rpx 0;
  background-color: #ffffff;
  box-shadow: 0rpx 2.74rpx 68.42rpx #66666626;
  border-radius: 50%;
  width: 104rpx;
}
.image_6 {
  width: 50rpx;
  height: 58rpx;
}
</style>
    
      